<!-- 通用头像 -->
<template>
  <div class="img__text_avatar_default-color" ref="imgTextAvatar">
    <Avatar v-if="image"
            :image="image"
            :size="type"
            :shape="shape"
            :style="`width: ${width}; height: ${height};`"/>
    <Avatar v-else
            :label="renderLabel"
            :size="type"
            :shape="shape"
            :style="`width: ${width}; height: ${height};`"/>
  </div>
</template>

<script lang="ts" setup>
import {ref, defineProps, defineEmits, nextTick, watch, onUpdated, Ref} from 'vue';

type AvatarSizeType = 'normal' | 'large' | 'xlarge' | undefined;
type AvatarShapeType = 'square' | 'circle' | undefined;

/** props 和 emit */
const props = defineProps<{
  label: string
  image?: string
  type?: AvatarSizeType
  shape?: AvatarShapeType
  height?: string
  width?: string
  upload?: boolean
  uploadText?: string
}>();
const emits = defineEmits(['uploadFiles'])

const renderLabel = ref(props.label),
    imgTextAvatar = ref(null),
    modalContainer: Ref<any> = ref(null),
    inputContainer: Ref<any> = ref(null);
if (renderLabel.value && renderLabel.value.trim() !== '') {
  renderLabel.value = renderLabel.value.substring(0, 1).toUpperCase();
}

function openUpload(props) {
  // 初始化 el
  let initModalEl = modalContainer.value, initInputEl = inputContainer.value;
  if (initModalEl) {
    initModalEl.remove();
    modalContainer.value = null;
  }
  if (initInputEl) {
    initInputEl.remove();
    inputContainer.value = null;
  }
  if (props.upload) {
    nextTick(() => {
      if (imgTextAvatar.value) {
        let element = imgTextAvatar.value as HTMLElement;
        let avatarContainer = element.children[0] as HTMLElement;
        if (avatarContainer) {
          let img = avatarContainer.children[0] as HTMLElement;
          let height = 32, width = 32, initBottom = '-50%';
          if (img) img.style.zIndex = '-2';
          if (props.height) height = Number(props.height.replace('px', '').trim());
          if (props.width) width = Number(props.width.replace('px', '').trim());
          avatarContainer.style.position = 'relative';
          let modal = document.createElement('div');
          // modal 定位
          modal.style.position = 'absolute';
          modal.style.bottom = initBottom;
          modal.style.left = '0';
          modal.style.right = '0';
          modal.style.margin = '0 auto';
          modal.style.backgroundColor = '#000000';
          modal.style.height = `${height}px`;
          modal.style.width = `${width}px`;
          modal.style.borderRadius = `${height / 2}px`;
          modal.style.transition = 'bottom .5s ease, opacity .2s ease-out, z-index .1s';
          // 位置显隐
          modal.style.zIndex = '-1';
          modal.style.opacity = '0';
          // 文字居中
          modal.style.display = 'flex';
          modal.style.justifyContent = 'center';
          modal.style.alignItems = 'center';
          modal.innerText = props.uploadText ? props.uploadText : '上传';
          avatarContainer.append(modal);
          // 加入 modal container
          modalContainer.value = modal;
          // 拉入拉出
          avatarContainer.addEventListener('mouseenter', () => {
            modal.style.bottom = '0';
            modal.style.opacity = '.8';
            modal.style.zIndex = '5';
            modal.style.cursor = 'pointer';
          });
          avatarContainer.addEventListener('mouseleave', () => {
            modal.style.zIndex = '-1';
            modal.style.bottom = initBottom;
            modal.style.opacity = '0';
          });

          // 创建 input 文件 div
          let input = document.createElement('input');
          input.type = 'file';
          input.name = 'file';
          input.accept = 'image/*'
          input.style.display = 'none';
          input.addEventListener('change', (e) => {
            if (e && e.target) {
              let target = e.target as any;
              if (target.files) emits('uploadFiles', target.files);
            }
          });
          inputContainer.value = input;
          // 打开 file input
          modal.addEventListener('click', () => {
            input.click();
          })
        }
      }
    });
  }
}

// 锁，避免 watch 和 onMounted 重复触发
watch(props, (n) => {
  // 修改 render
  renderLabel.value = n.label;
  nextTick(() => {
    if (renderLabel.value && renderLabel.value.trim() !== '') {
      renderLabel.value = renderLabel.value.substring(0, 1).toUpperCase();
    }
  })
})

onUpdated(() => {
  // 开启上传
  openUpload(props);
})
</script>

<style lang="less" scoped>
.p-avatar-text {
  z-index: 0 !important;
}
</style>
